<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Diary App</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form id="diaryForm">
        <label for="date">Date:</label>
        <input type="date" id="date" name="date" required>

        <label for="weather">Weather:</label>
        <input type="text" id="weather" name="weather" required>

        <label for="mood">Mood:</label>
        <input type="text" id="mood" name="mood" required>

        <label for="events">Events:</label>
        <textarea id="events" name="events"></textarea>

        <input type="submit" value="Submit">
    </form>
    <script>
        $("#diaryForm").submit(function(event) {
            event.preventDefault(); // Prevent form submission
            var data = {
                date: $("#date").val(),
                weather: $("#weather").val(),
                mood: $("#mood").val(),
                events: $("#events").val()
            };
            $.ajax({
                type: "POST",
                url: "/diary",
                contentType: "application/json",
                data: JSON.stringify(data),
                success: function(response) {
                    alert(response.message);
                },
                error: function(response) {
                    alert("Error: " + response.responseJSON.error);
                }
            });
        });
    </script>
</body>
</html>